<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">
                <div>股票行业配置(亿元)</div>
                <div style="cursor: pointer;">更多</div>
            </div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="stockConfiguration"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "stockConfiguration",
        data(){
            return{
                option:{
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        },
                        formatter: function (params) {
                            return params[0].name + ': ' + params[0].value;
                        }
                    },
                    xAxis: {
                        data: ['金融、保险业', '医药生物', '能源', '通信服务业', '制造业', '交通运输、仓储业', '房地产业','信息服务' ],
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {
                            color: '#ffffff'
                        }
                    },
                    yAxis: {
                        splitLine: {show: false},
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {show: false}
                    },
                    color: ['#db41e5'],
                    series: [{
                        name: 'hill',
                        type: 'pictorialBar',
                        barCategoryGap: '-130%',
                        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                        itemStyle: {
                            opacity: 0.5
                        },
                        emphasis: {
                            itemStyle: {
                                opacity: 1
                            }
                        },
                        data: [58.91, 88.37, 29.46, 26.51, 23.56, 20.62, 17.67,29.46],
                        z: 10
                    }, {
                        name: 'glyph',
                        type: 'pictorialBar',
                        barGap: '-100%',
                        symbolPosition: 'end',
                        symbolSize: 50,
                        symbolOffset: [0, '-120%'],
                        data: [{
                            value: 58.91,
                            // symbol: pathSymbols.reindeer,
                            symbolSize: [0, 0]
                        }, {
                            value: 88.37,
                            // symbol: pathSymbols.rocket,
                            symbolSize: [0, 0]
                        }, {
                            value: 29.46,
                            // symbol: pathSymbols.plane,
                            symbolSize: [0, 0]
                        }, {
                            value: 26.51,
                            // symbol: pathSymbols.train,
                            symbolSize: [0, 0]
                        }, {
                            value: 23.56,
                            // symbol: pathSymbols.ship,
                            symbolSize: [0, 0]
                        }, {
                            value: 20.62,
                            // symbol: pathSymbols.car,
                            symbolSize: [0, 0]
                        }, {
                            value: 20,
                            // symbol: pathSymbols.run,
                            symbolSize: [0, 0]
                        }, {
                            value: 17.67,
                            // symbol: pathSymbols.walk,
                            symbolSize: [0, 0]
                        },
                            {
                                value: 29.46,
                                // symbol: pathSymbols.walk,
                                symbolSize: [0, 0]
                            }]
                    }]
                }
            }
        },
        mounted() {
            this.getEchart()
        },
        methods:{
            getEchart() {
                let myChart = echarts.init(document.getElementById('stockConfiguration'));
                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 50px !important;
        top: 3070px;
        width: 1820px;
        height: 400px;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
    /deep/.sn-title{
        display: flex;
        div:nth-child(2){
            margin-left: auto;
            display: flex;
            .el-select{
                width: 80px;
            }
            .el-date-editor{
                width: 120px;
            }
            .el-input__inner{
                height: 20px !important;
            }
        }
    }
</style>